<template>
  <div>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <span>我来啦!</span>
      <el-input v-model="chapterTitle" placeholder="文章标题"></el-input>

      <button @click="subform">确认修改</button>
    </el-drawer>
    <el-table :data="tableData" style="width: 50%; margin: 0 auto">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.timer }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章标题" width="180">
        <template slot-scope="scope">
          {{ scope.row.chapterTitle }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.chapterId)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteChapter(scope.row.chapterId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      drawer: false,
      chapterTitle: "",
      changeid: 0,
    };
  },
  methods: {
    handleEdit(id) {
      console.log(id);
      this.drawer = true;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].chapterId == id) {
          this.chapterTitle = this.tableData[i].chapterTitle;
          this.changeid = this.tableData[i].chapterId;
        }
      }
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    subform() {
      axios
        .post("http://localhost:3000/changelist", {
          id: this.changeid,
          chapterTitle: this.chapterTitle,
        })
        .then((res) => {
          console.log(res);
          if (res.data == "ok") {
            let index = "";
            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].chapterId == this.changeid) {
                index = i;
                var chageobj = {
                  id: this.changeid,
                  chapterTitle: this.chapterTitle,
                  timer: this.tableData[index].timer,
                };
                this.tableData.splice(i, 1, chageobj);
              }
            }
          }
        });
    },
    getList() {
      axios.get("http://localhost:3000/getlist").then((res) => {
        if (res.status == 200) {
          this.tableData = res.data;
        }
      });
    },
    deleteChapter(id) {
      axios
        .post("http://localhost:3000/del", {
          id: id,
        })
        .then((res) => {
          if (res.data == "success") {
            let index = "";
            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].chapterId == id) {
                index = i;
              }
            }
            this.tableData.splice(index, 1);
          }
        });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>